var $ = require('jquery');
var util = require('imutil');
var Backbone = require('backbone');

var tpl = require('../tpl');
var i18n = require('../i18n');
var servant = require('../i18n/servant');
var bus = require('bus');
var Hammer = require('hammer');



var defaults = {
    el: null,
    tmpl: tpl.chat2.imgbox(servant.fuse({}, i18n.imageCode))
};

var Imgbox = function(config){
    this.config = util.extend({}, defaults, config);
    this.elems = {};
    this.__init();
};

Imgbox.prototype = {
    __init: function(){
        this.elems.$el = $(this.config.el);
        this.elems.$imglist = $(this.config.tmpl);
        this.elems.$img = $('.J-img-code',this.elems.$imglist);
        this.elems.$del = $('.J-img-del', this.elems.$imglist);
        this.elems.$el.append(this.elems.$imglist);
        this._initEvents();
    },
    _initEvents:function(){
        var that= this;
        this.elems.$img.click(function(e){
            e.preventDefault();
            e.stopPropagation();
            that.selectImg($(this));
        })

        this.elems.$del.each(function(el){
            $(this).click(function(){
                that.imgdelete();
            });
        })

       this.slideImghammer();


    },
    show: function(){
        this.elems.$imglist.show();
    },
    hide: function(){
        this.elems.$imglist.hide();
        //this.elems.$img.removeClass('im-anim-face');
    },
    imgdelete:function(){
        this.trigger("imgdelete");
    },
    selectImg:function($el){
        var faceTitle = i18n.imageCode[$el.attr("code").substr(2)];
        var imgCode = "["+faceTitle+"]";
        
        /*
        // 表情选中动画
        $el.removeClass('im-anim-face');
        setTimeout(function(){
            $el.addClass('im-anim-face');
        }, 0);
        // end
        */
        
        this.trigger("selectImg",imgCode);
    },
    slideImghammer:function(){
        var that = this;
        this.elems.$imglist.find(".J-im-face-box").each(function(index, item) {
            var hammer = new Hammer(item);
            var imgmove;
            hammer.on("panmove",function(e){
                $(".J-im-face-container").removeClass("im-face-container-anim");
                //$(".J-im-face-container").css("margin-left","-"+ +"%");
                imgmove = e.deltaX;
            });

            hammer.on("panend",function(e){
                var toPage =0;
                $(".J-im-face-container").addClass("im-face-container-anim");

                if(parseInt(imgmove)<-80 && index<2){
                    toPage = index+1;
                    that.slideImg(toPage);
                    $(".J-im-face-container").addClass("im-face-tab-"+toPage);
                }else if(parseInt(imgmove)>80 && index>0){
                    toPage = index-1;
                    that.slideImg(toPage);
                    $(".J-im-face-container").removeClass("im-face-tab-"+index);
                }

            });

        });
    },
    slideImg:function(page){
        $(".J-im-facetrigger i").removeClass("on");
        $(".J-im-facetrigger i:eq("+page+")").addClass("on");
    }
};

util.extend(Imgbox.prototype,Backbone.Events)
module.exports = Imgbox;